<template>
  <topChartContent title="重大业务进展情况">
    <div id="majorChartContainer"></div>
  </topChartContent>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import topChartContent from "../baseComponent/topChartContent.vue";
import * as echarts from "echarts";
import { majorData } from "@/request/product";

let majorChart = null;
let barSeriesStyle = {
  type: "bar",
  stack: "total",
};
const createPie = (map, yAxisData, barDom) => {
  majorChart = echarts.init(barDom);
  let seriesData = [];
  for (let key in map) {
    seriesData.push({
      name: key,
      ...barSeriesStyle,
      data: map[key],
      label: {
        show: true,
        color: '#fff',
        fontSize: 30,
        fontWeight: 800,
        formatter: ({data}) => {
            return data > 0 ? data + '%' : ''
        }
      }
    });
  }

  let options = {
    grid: {
      left: "15%",
      bottom: "24%",
    },
    legend: {
      bottom: "16%",
      itemGap: 90,
      itemWidth: 40,
      itemHeight: 20,
      textStyle: {
        color: "#fff",
        fontSize: 26,
      },
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      type: "category",
      data: yAxisData,
      axisLabel: {
        color: "#fff",
        fontSize: 26,
      },
    },
    series: seriesData,
  };
  majorChart.setOption(options);
};

onMounted(async () => {
  let {
    data: { data: produceData },
  } = await majorData();
  let yAxisData = [],
    map = {};
  produceData.map((item) => {
    yAxisData.push(item.name);
    item.processState.map((process) => {
      if (!map[process.stepName]) {
        map[process.stepName] = [process.finishPercent];
      } else {
        map[process.stepName] = [
          ...map[process.stepName],
          process.finishPercent,
        ];
      }
    });
  });
  createPie(map, yAxisData, document.getElementById("majorChartContainer"));
});

onUnmounted(() => {
  echarts.dispose(majorChart);
  majorChart = null;
});
</script>

<style lang="less" scoped>
#majorChartContainer {
  width: 100%;
  height: 100%;
}
</style>
